<template>
  <div id="login_container">
    <div class="login_panel">
      <div class="login_panel_form">
        <div class="login_panel_form_title">
          <img class="login_panel_form_title_logo" src="@/assets/logo.svg" alt="" />
          <div class="login_panel_form_title_p">{{ $GLOBAL_CONFIG.appName }}</div>
        </div>
        <el-form ref="loginForm" 
        :model="loginFormData"
        :rules="rules"
        :validate-on-rule-change="false"
        @keyup.enter="submitForm"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginFormData.username"
              placeholder="请输入用户名"
            >
              <template #suffix>
                <span class="input-icon">
                  <el-icon>
                    <user />
                  </el-icon>
                </span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginFormData.password"
              :type="lock === 'lock' ? 'password' : 'text'"
              placeholder="请输入密码"
            >
              <template #suffix>
                <span class="input-icon">
                  <el-icon>
                    <component :is="lock" @click="changeLock" />
                  </el-icon>
                </span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="captcha">
            <div class="vPicBox">
              <el-input
                v-model="loginFormData.captcha"
                placeholder="请输入验证码"
                style="width: 60%"
              ></el-input>
              <div class="vPic">
                <img
                  v-if="picPath"
                  :src="picPath"
                  alt="请输入验证码"
                  @click="loadCaptcha()"
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              style="width: 46%"
              size="large"
              @click="register"
            >注册</el-button>
            <el-button
              type="primary"
              size="large"
              style="width: 46%; margin-left: 8%"
              @click="submitForm"
            >登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="login_panel_right"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
};
</script>

<script setup>

import { reactive, ref } from "vue";
import { ElMessage } from 'element-plus'
import { captcha } from '@/api/user'
import  LoginPresenter  from './loginPresenter'

const loginPresent = new LoginPresenter()

const loginForm = ref(null); //模板ref，获取dom元素节点
const picPath = ref(""); //基本类型封装，使数据响应式
const loginFormData = reactive({
  username: "admin",
  password: "123456",
  captcha: "",
  captchaId: "",
});

const rules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  captcha: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    },
  ],
})

const lock = ref("lock");
const changeLock = () => {
  lock.value = lock.value === "lock" ? "unlock" : "lock";
};

//注册
const register = () => {
  console.log("注册")
}

//登录
const submitForm = () => {
  loginForm.value.validate(async(v) => {
    if (v) {
      const flag = await login()
      if (!flag) {
        loadCaptcha()
      }
    } else {
      ElMessage({
        type: 'error',
        message: '请正确填写登录信息',
        showClose: true,
      })
      loadCaptcha()
      return false
    }
  })
}

const login = async() => {
  return await loginPresent.toLogin(loginFormData)
}


// 获取验证码
const loadCaptcha = () => {
  captcha().then(async(ele) => {
    rules.captcha= [ {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    },{
      max: ele.data.captchaLength,
      min: ele.data.captchaLength,
      message: `请输入${ele.data.captchaLength}位验证码`,
      trigger: 'blur',
    }]
    picPath.value = ele.data.picPath
    loginFormData.captchaId = ele.data.captchaId
  }).catch((error) => {
    console.log("获取验证码失败 " + error);
  })
  loginFormData.captcha = ""
}

//初始化逻辑
loadCaptcha()



</script>

<style lang="scss" scoped>
//当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。
@import "@/assets/css/views_login.scss";
</style>

<style>
.el-input__inner {
  height: 40px;
  line-height: 40px;
}
</style>
